import React, { useEffect, useRef } from 'react';
import { Box, FormGroup, Checkbox as MuiCheckbox, FormControlLabel } from '@mui/material';
import { bgLight } from '../../theme';

interface CheckboxProps {
  id?: string;
  label?: string;
  checked?: boolean;
  disabled?: boolean;
  fullWidth?: boolean;
  noBackground?: boolean;
  styles?: React.CSSProperties;
  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
  commands?: any[];
}

const Checkbox: React.FC<CheckboxProps> = ({
  id,
  label,
  checked = false,
  disabled = false,
  fullWidth = false,
  noBackground = false,
  styles: customStyles,
  onChange,
  commands,
}) => {
  const prevCommandsRef = useRef(commands);

  useEffect(() => {
    if (commands !== prevCommandsRef.current) {
      // Force update would be handled by parent
      prevCommandsRef.current = commands;
    }
  }, [commands]);

  const localStyle: React.CSSProperties = fullWidth ? { width: '100%' } : {};
  if (noBackground) {
    localStyle.backgroundColor = 'inherit';
  }

  return (
    <FormGroup
      style={{
        backgroundColor: bgLight,
        borderTopLeftRadius: 4,
        borderTopRightRadius: 4,
        ...localStyle,
        ...customStyles,
      }}
    >
      <FormControlLabel
        disabled={disabled}
        label={label || ''}
        control={
          <Box ml={1}>
            <MuiCheckbox
              id={id}
              color="primary"
              disabled={disabled}
              checked={checked}
              onChange={onChange}
            />
          </Box>
        }
      />
    </FormGroup>
  );
};

export default Checkbox;

